<template>
  <Dialog :title="'特控线设置'" v-model="dialogVisible" width="1000px">
    <div class="control-line-container">
      <!-- 考试信息显示 -->
      <el-card class="exam-info-card" shadow="never">
        <template #header>
          <span class="card-title">考试信息</span>
        </template>
        <el-descriptions :column="3" border>
          <el-descriptions-item label="考试名称">{{ examInfo.examName }}</el-descriptions-item>
          <el-descriptions-item label="考试时间">{{ formatDate(examInfo.examDate) }}</el-descriptions-item>
          <el-descriptions-item label="总分">{{ examInfo.totalScore }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 特控线列表 -->
      <el-card class="control-line-list-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span class="card-title">特控线配置</span>
            <el-tooltip 
              :content="controlLineList.length >= 1 ? '每个考试只能设置一条特控线' : ''"
              :disabled="controlLineList.length < 1"
            >
              <el-button 
                type="primary" 
                @click="openLineForm('create')"
                :disabled="controlLineList.length >= 1"
              >
                <Icon icon="ep:plus" class="mr-5px" /> 添加特控线
              </el-button>
            </el-tooltip>
          </div>
        </template>
        
        <el-table v-loading="loading" :data="controlLineList" :stripe="true" :show-overflow-tooltip="true">
          <!-- 隐藏特控线名称、线类型、科目类型列 -->
          <!-- <el-table-column label="特控线名称" align="center" prop="lineName" />
          <el-table-column label="线类型" align="center" prop="lineType">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.EXAM_LINE" :value="scope.row.lineType" />
            </template>
          </el-table-column>
          <el-table-column label="科目类型" align="center" prop="subjectType">
            <template #default="scope">
              <el-tag v-if="scope.row.subjectType === 'physics'" type="primary">物理类</el-tag>
              <el-tag v-else-if="scope.row.subjectType === 'history'" type="success">历史类</el-tag>
              <span v-else>{{ scope.row.subjectType }}</span>
            </template>
          </el-table-column> -->
          <el-table-column label="物理特控线" align="center" prop="physicsScoreLine" />
          <el-table-column label="历史特控线" align="center" prop="historyScoreLine" />
          <!-- 隐藏省控线列 -->
          <!-- <el-table-column label="物理省控线" align="center" prop="physicsProvinceControlLine" />
          <el-table-column label="历史省控线" align="center" prop="historyProvinceControlLine" /> -->
          <!-- 暂时隐藏以下列 -->
          <!-- <el-table-column label="分数线" align="center" prop="scoreLine" />
          <el-table-column label="省控线" align="center" prop="provinceControlLine" />
          <el-table-column label="换算比例" align="center" prop="conversionRatio">
            <template #default="scope">
              {{ scope.row.conversionRatio }}%
            </template>
          </el-table-column> -->
          <el-table-column label="对应省份" align="center" prop="province" />
          <el-table-column label="对应年份" align="center" prop="year" />
          <!-- 隐藏说明列 -->
          <!-- <el-table-column label="说明" align="center" prop="description" show-overflow-tooltip /> -->
          <el-table-column label="操作" align="center" min-width="120px">
            <template #default="scope">
              <el-button
                link
                type="primary"
                @click="openLineForm('update', scope.row.id)"
              >
                编辑
              </el-button>
              <el-button
                link
                type="danger"
                @click="handleDeleteLine(scope.row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    
    <template #footer>
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </template>
  </Dialog>

  <!-- 特控线表单弹窗 -->
  <ExamControlLineForm ref="lineFormRef" @success="getControlLineList" />
</template>

<script setup lang="ts">
import { getIntDictOptions, getStrDictOptions, DICT_TYPE } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import { ExamTestApi, ExamTestVO } from '@/api/system/examtest'
import { ExamControlLineApi, ExamControlLineVO } from '@/api/system/examcontrolline'
import ExamControlLineForm from '@/views/system/examcontrolline/ExamControlLineForm.vue'

/** 特控线设置弹窗 */
defineOptions({ name: 'ExamControlLineDialog' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const dialogVisible = ref(false) // 弹窗的是否展示
const loading = ref(false) // 列表的加载中
const examId = ref<number>() // 当前考试ID
const examInfo = ref<ExamTestVO>({} as ExamTestVO) // 考试信息
const controlLineList = ref<ExamControlLineVO[]>([]) // 特控线列表

/** 获取考试信息 */
const getExamInfo = async (id: number) => {
  try {
    examInfo.value = await ExamTestApi.getExamTest(id)
  } catch (error) {
    console.error('获取考试信息失败:', error)
    message.error('获取考试信息失败')
  }
}

/** 获取特控线列表 */
const getControlLineList = async () => {
  if (!examId.value) return
  
  loading.value = true
  try {
    const data = await ExamControlLineApi.getExamControlLinePage({
      examId: examId.value,
      pageNo: 1,
      pageSize: 1000
    })
    controlLineList.value = data.list || []
  } catch (error) {
    console.error('获取特控线列表失败:', error)
    message.error('获取特控线列表失败')
  } finally {
    loading.value = false
  }
}

/** 打开弹窗 */
const open = async (id: number) => {
  dialogVisible.value = true
  examId.value = id
  
  // 获取考试信息和特控线列表
  await getExamInfo(id)
  await getControlLineList()
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 特控线表单操作 */
const lineFormRef = ref()
const openLineForm = (type: string, id?: number) => {
  lineFormRef.value.open(type, id, examId.value)
}

/** 删除特控线 */
const handleDeleteLine = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await ExamControlLineApi.deleteExamControlLine(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getControlLineList()
  } catch {}
}

/** 定义事件 */
const emit = defineEmits(['success'])
</script>

<style scoped>
.control-line-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.exam-info-card,
.control-line-list-card {
  margin-bottom: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-weight: 600;
  font-size: 16px;
}

:deep(.el-card__header) {
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-card__body) {
  padding: 20px;
}
</style>
